<template>
  <div id="app">
    <el-form ref="form" :model="form" label-width="80px" :rules="addForm">
      <h1>工程设计变更申请单</h1>
      <el-form-item label="施工单位" class="head" prop="construction">
        <el-input v-model="form.construction"></el-input>
      </el-form-item>
      <el-form-item label="编号" class="head" prop="number">
        <el-input v-model="form.number"></el-input>
      </el-form-item>
      <el-form-item label="工程名称" prop="name">
        <el-input v-model="form.name" style="width:680px"></el-input>
      </el-form-item>
      <el-form-item label="变更部位" prop="change_parts">
        <el-input type="textarea" v-model="form.change_parts" style="width:680px"></el-input>
      </el-form-item>
      <el-form-item label="变更内容" prop="change_content">
        <el-input type="textarea" v-model="form.change_content" style="width:680px"></el-input>
      </el-form-item>
      <el-form-item label="申请方" prop="apply">
         <el-select v-model="form.apply" placeholder="请选择您的身份" style="width:240px">
          <el-option label="设计方" value="designer"></el-option>
          <el-option label="施工方" value="builder"></el-option>
          <el-option label="监理" value="watcher"></el-option>
          <el-option label="业主" value="boss"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请日期">
        <el-col :span="8">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker> 
        </el-col> 
        <el-col class="line" :span="1" :offset="1">-</el-col>
        <el-col :span="8">
          <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
        </el-col>
      </el-form-item>
      <!-- <el-form-item label="文件上传   :">
          <el-upload
            class="upload-demo"
            ref="upload"
            action="#"
            :limit="3"
            :http-request="uploadOk"
            :auto-upload="true">
            选取文件
          </el-upload>
      </el-form-item> -->
      <el-form-item>
        <el-button @click.native="submit" style="width: 100px;" type="primary">提交</el-button>
      </el-form-item>
      <!-- https://xuliangzhan.com/vxe-table/index.html#/table/other/xlsx -->
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
      return {
        form: {
          construction: '',
          number: '',
          name: '',
          change_parts: '',
          change_content: '',
          apply: '',
          date1: '',
          date2: '',
          status:0
        },
        addForm: {
          construction: [{ required: true, message: '施工单位不能为空!', trigger: 'blur' },],
          number: [{ required: true, message: '编号不能为空!', trigger: 'blur' },],
          name: [{ required: true, message: '工程名称不能为空!', trigger: 'blur' },],
          change_parts: [{ required: true, message: '变更部位不能为空!', trigger: 'blur' },],
          change_content: [{ required: true, message: '变更内容不能为空!', trigger: 'blur' },],
          apply: [{ required: true, message: '申请方不能为空!', trigger: 'blur' },],
        },
      }
    },
    methods: {
      // 上传文件
      uploadOk (val) {
        const fd = new FormData()
        fd.append('file', val.file) // 'file是与后端接收对应的'
        this.$axios({
          method: 'post',
          url: 'http://112.124.46.193:8080/grade_protection/sysInfo/annex/',
          headers: { 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryXUIhYHlAmsiYAKUG' },
          data: fd
        })
          .then(response => {
            // if (response.data.meta.status === 201) {
            //   this.$message.success(response.data.meta.msg)
            // } else {
            //   this.$message.error('文件上传失败！')
            // }
          })
          .catch(() => {
            this.$message.error('请先提交信息！')
          })
      },
      submit(){
        //   这样做的缺陷是一次只能新建一个文件
        sessionStorage.setItem("application", JSON.stringify(this.form));
        this.$message({
            message: '提交成功',
            type: 'success',
            center: true
        });
      }
    }
}
</script>

<style  lang="less" scoped>
.el-form {
  width: 800px;
  height: auto;
  margin: 0 auto;
  border: 1px dashed rgba(0, 50, 100, 0.8);
  position: relative;
  h1{
    text-align: center;
  }
  .head{
    .el-input {
      width: 300px;
    }
    display: inline-block;
  }
}
.el-upload--text{
  width: 419px;
  height: 36px;
}
</style>